<template>
  <div class="container">
    <el-card>
      <div class="btn_wrapper">
        <el-row type="flex" justify="end">
          <el-button @click="$router.push('/questions/new')" size="medium" type="success"
            ><i class="el-icon-edit" style="margin-right: 5px"></i
            >新增试题</el-button
          >
        </el-row>
      </div>
      <!-- 表单组件 -->
      <CohiceForm
        @btnReset="btnReset"
        :tabsForm.sync="tabsForm"
        :searchForm.sync="searchForm"
        @btnSearch="btnSearch"
        :subjectSimple="subjectSimple"
        :pageForm.sync="pageForm"
      ></CohiceForm>
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane label="全部" name="first"></el-tab-pane>
        <el-tab-pane :type="0" label="待审核" name="second"></el-tab-pane>
        <el-tab-pane :type="1" label="已审核" name="third"></el-tab-pane>
        <el-tab-pane :type="2" label="已拒绝" name="fourth"></el-tab-pane>
      </el-tabs>
      <el-alert
      :closable="false"
        :title="`数据一共${total}条`"
        type="info"
        show-icon
        style="margin-bottom: 15px"
      >
      </el-alert>
      <!-- <el-checkbox v-model="checked" @click="checked = !checked">备选项</el-checkbox> -->
      <!-- 表格组件 -->
      <CohiceBorder
        :tableData="tableData"
        :isShowMyDialog.sync="isShowMyDialog"
        @getDelChoice="getDelChoice"
        :viewData.sync="viewData"
        :subjectSimple="subjectSimple"
        @getChoice="getChoice"
      ></CohiceBorder>
      <el-row type="flex" justify="end" style="margin-top: 20px">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pages.page"
          :page-sizes="[2, 4, 6, 10]"
          :page-size="pages.pagesize"
          layout=" prev, pager, next, sizes, jumper"
          :total="total"
        >
        </el-pagination>
      </el-row>
    </el-card>
    <!-- 弹出框组件 -->
    <ChoicePreview
      :isShowMyDialog.sync="isShowMyDialog"
      :viewData="viewData"
    ></ChoicePreview>
  </div>
</template>

<script>
import { simple } from '../../api/hmmm/subjects'
import CohiceForm from '../components/cohice-form.vue'
import {
  choice,
  detail as quesDetail
} from '../../api/hmmm/questions'

import ChoicePreview from '../components/choice-preview.vue'
import CohiceBorder from '../components/choice-border.vue'
export default {
  components: {
    ChoicePreview,
    CohiceForm,
    CohiceBorder
  },
  data () {
    return {
      checked: false,
      showCheck: false, // 控制审核
      isShowMyDialog: false,
      activeName: 'first',
      tableData: {},
      viewData: {}, // 题目预览详情
      pages: {
        page: 1,
        pagesize: 2
      },
      total: 100,
      checkForm: {
        chkState: 1,
        chkRemarks: '',
        id: ''
      },
      subjectSimple: [], // 学科列表
      searchForm: {
        chkState: null, // 待审核0 已审核1 已拒绝2
        subjectID: null, // 选择学科
        catalogID: null, // 二级目录
        tags: null, // 标签
        keyword: null, // 关键词 注意 这个发送给服务器 需要解码转化一下
        questionType: null, // 试题类型
        difficulty: null, // 难度
        direction: null, // 方向
        creatorID: null, // 录入人
        remarks: null, // 题目备注
        shortName: null, // 企业简称
        province: null, // 省
        city: null // 市
      },
      // 控制分页组件
      pageForm: {
        chkState: null
      },
      // 控制切换栏
      tabsForm: {}
    }
  },
  created () {
    this.getChoice()
    this.getSubjectSimple()
    // console.log(cityData.datas)
  },
  methods: {
    async getChoice () {
      try {
        const { data } = await choice({
          page: this.pages.page,
          pagesize: this.pages.pagesize,
          ...this.searchForm
        })
        this.tableData = data
        // console.log(this.tableData.items)
        this.total = data.counts
      } catch (error) {
        console.log(error)
      }
    },
    // 获取学科简单列表
    async getSubjectSimple () {
      const { data } = await simple()
      this.subjectSimple = data
      // console.log(this.subjectSimple)
    },
    // 切换页面
    async handleCurrentChange (page) {
      // console.log(page)
      // console.log(this.pageFlag)
      this.pages.page = page
      // console.log(this.pageForm)
      try {
        const { data } = await choice({
          page: this.pages.page,
          pagesize: this.pages.pagesize,
          ...this.pageForm
        })
        this.tableData = data
        // console.log(this.tableData.items)
        this.total = data.counts
      } catch (error) {
        console.log(error)
      }
    },
    // 选择页面数量
    async handleSizeChange (pageSize) {
      // console.log(pageSize)
      this.pages.pagesize = pageSize
      try {
        const { data } = await choice({
          page: this.pages.page,
          pagesize: this.pages.pagesize,
          ...this.pageForm
        })
        this.tableData = data
        // console.log(this.tableData.items)
        this.total = data.counts
      } catch (error) {
        console.log(error)
      }
      this.pages.page = 1
    },
    // 选择审核状态
    async handleClick (tab) {
      // console.log(tab.$attrs.type)
      this.searchForm.chkState = tab.$attrs.type
      // console.log(this.searchForm.chkState)
      this.pageForm.chkState = tab.$attrs.type
      // this.getChoice()
      try {
        console.log(this.tabsForm)
        const { data } = await choice({
          page: this.pages.page,
          pagesize: this.pages.pagesize,
          ...this.tabsForm,
          chkState: tab.$attrs.type
        })
        this.tableData = data
        // console.log(this.tableData.items)
        this.total = data.counts
      } catch (error) {
        console.log(error)
      }
    },

    // 预览
    async btnView (row) {
      console.log(row)
      const { data } = await quesDetail({ id: row.id })
      this.viewData = data
      this.isShowMyDialog = true
      // console.log(this.viewData)
    },
    async getDelChoice () {
      const currentPage = Math.ceil((this.total - 1) / this.pages.pagesize)
      this.pages.page = this.pages.page > currentPage ? currentPage : this.pages.page
      this.pages.page = this.pages.page < 1 ? 1 : this.pages.page
      // console.log(111)
      this.getChoice()
    },
    async btnSearch () {
      this.pages.page = 1
      this.getChoice()
    },
    async btnReset () {
      Object.keys(this.searchForm).forEach(key => { this.searchForm[key] = null })
      try {
        this.pages = {
          page: 1,
          pagesize: 2
        }
        const { data } = await choice({
          ...this.pages
        })
        this.tableData = data
        // console.log(this.tableData.items)
        this.total = data.counts
      } catch (error) {
        console.log(error)
      }
    }
  }
}
</script>

<style scoped lang="less">
.container {
  padding: 10px;
}
.btn_wrapper {
  margin-bottom: 15px;
}
.my-input {
  height: 32px;
  line-height: 32px;
}
.el-button {
  font-size: 12px;
}
</style>
